<template>
    <div>
        <div class="container e-m-h-auto e-m-b-15">
            <el-page-header @back="goBack" content="运营商详情"></el-page-header>
            <div class="flex">
                <!-- 基本信息 -->
                <div class="e-flex-1">
                    <div class="details-head e-m-t-30">
                        <span class="title e-m-r-15">{{ form.name }}</span>
                    </div>
                    <div class="details-body e-m-t-15">
                        <div class="cell">创建时间：{{ form.date}}</div>
                        <el-divider direction="vertical"></el-divider>
                        <div class="cell">账户余额：{{ form.balance}}</div>
                        <el-divider direction="vertical"></el-divider>
                        <div class="cell">是否自营：{{ form.isproprietary?'是':'' }}{{ form.enablebalance == 'false'?'否':'' }}</div>
                    </div>
                    <!-- <div class="details-body e-m-t-15">
                        <div class="cell">负责人：<span class="color-main">{{ form.manager.name || '--' }}</span><i class="el-icon-edit color-main"></i></div>
                        <el-divider direction="vertical"></el-divider>
                        <div class="cell">联系电话：{{ form.manager.mobile || '--' }}</div>
                    </div> -->
                    <div class="e-m-t-20">
                        <el-button type="primary" icon="el-icon-edit" plain @click="dialogVisible = true">编辑</el-button>
                        <!-- <el-button type="" icon="el-icon-open" plain @click="setState(form.usestate)">{{ form.usestate == '已启用'?'冻结站点账号':'解冻站点账号' }}</el-button> -->
                    </div>
                </div>
                <!-- 充值&提现 -->
                <div class="recharge-withdrawal-box">
                    <div class="item">
                        <div class="flex align-items-center">
                            <div class="e-flex-1">
                                <div class="e-m-b-5">可用余额</div>
                                <div>
                                    <span class="num">{{ utils.formatMoney(form.balance) }}</span><small>元</small>
                                </div>
                                <!-- <div v-else-if="form.balance == null">
                                    <span class="num">不限金额</span>
                                </div> -->
                            </div>
                            <!-- <div class="e-p-l-60">
                                <el-button type="primary" class="e-w-120" @click="setRecharge">充值</el-button>
                            </div> -->
                        </div>
                    </div>
                    <!-- <div class="item">
                        <div class="flex align-items-center">
                            <div>
                                <div class="flex align-items-center">
                                    <i class="iconfont icon-qianbao"></i>
                                    <div class="e-flex-1">
                                        <div class="">已付金额</div>
                                        <span class="text">{{ utils.formatMoney(form.amount) }}</span><small>元</small>
                                    </div>
                                </div>
                            </div>
                            <div class="e-flex-1 text-center">
                                <div class="divider"></div>
                            </div>
                            <div>
                                <div class="flex align-items-center">
                                    <i class="iconfont icon-dongjiezijin"></i>
                                    <div class="e-flex-1">
                                        <div class="">预留现金</div>
                                        <span class="text">{{ utils.formatMoney(form.cash) }}</span><small>元</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div> -->
                </div>
            </div>
        </div>
        <div class="container e-m-h-auto e-m-b-15">
            <div class="type-state e-m-b-30">
                <span v-for="(item, index) in typeArr" :key="index" :class="{ 'on': typeId == item.value }" @click="typeId = item.value">{{ item.name }}</span>
            </div>
            <!-- 余额变动 -->
            <div class="container-item" v-if="typeId == 1">
                <balance-list :operatorId="id"></balance-list>
            </div>
            <!-- 运营商员工 -->
            <div class="container-item" v-if="typeId == 2">
                <operator-staff-list :operatorId="id"></operator-staff-list>
            </div>
            <!-- 运营商充值申请记录 -->
            <div class="container-item" v-if="typeId == 3">
                <operator-charge :operatorId="id" @confirm="getDetails()"></operator-charge>
            </div>
        </div>
        <!-- 充值 -->
        <el-dialog title="充值" :visible.sync="dialogVisible" width="500px" z-index="99">
            <el-form ref="form" label-width="auto">
                <el-form-item label="充值金额">
                    <el-input type="number" v-model="recharge.amount" placeholder="请输入充值金额"></el-input>
                </el-form-item>
                <el-form-item label="备注">
                    <el-input
                        type="textarea"
                        :rows="2"
                        placeholder="请输入内容"
                        v-model="recharge.remark">
                    </el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="confirmRecharge">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        layout: 'admin',
        components:{
            
        },
        head() {
            return {
                title: '运营商详情' 
            }
        },
        data() {
            return {
                dialogVisible: false,
                id: 0,
                typeId: 1,
                typeArr: [
                    {
                        name: '余额变动',
                        value: 1
                    },
                    {
                        name: '运营商员工',
                        value: 2
                    },
                    {
                        name: '充值申请记录',
                        value: 3
                    },
                ],
                form:{
                    name: '',
                    balance: 0,
                    enablebalance: 'false'
                },
                recharge:{
                    amount: null,
                    remark: ''
                }
            }
        },
        created() {
            this.id = Number(this.$route.query.id)
            this.getDetails()
        },
        methods:{
            goBack() {
                this.$router.go(-1)
            },
            // 运营商详情
            getDetails(){
                this.$axios.get('/Operator/Detail?id=' + this.id).then((res)=>{
                    this.form = res
                })
            },
            setRecharge(){
                this.dialogVisible = true
                this.recharge.amount = null
                this.recharge.remark = ''
            },
            // 充值
            confirmRecharge(){
                this.$axios.post('/Operator/Balance/Recharge', {
                    id: this.id,
                    amount: this.recharge.amount,
                    remarks: this.recharge.remark
                }).then((res)=>{
                    this.$message.success('充值成功')
                    this.getDetails()

                    this.dialogVisible = false
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .recharge-withdrawal-box{
        // width: 400px;
        background: #e6fbfb;
        border: 1px solid #9aeeef;
        padding: 15px 30px;
        display: flex;
        flex-direction: column;
        color: var(--secondary);
        .item{
            flex: 1;
            display: flex;
            align-items: center;
            border-bottom: 1px dashed var(--border-light);
            padding-bottom: 15px;
            margin-bottom: 15px;
            &:last-child{
                border: 0;
                padding: 0;
                margin: 0;
            }
            .num{
                font-size: 32px;
                font-weight: bold;
                color: var(--orange);
            }
            .text{
                color: var(--dark);
                font-size: 20px;
            }
            .iconfont{
                font-size: 46px;
                margin-right: 15px;
                color: var(--grey);
            }
        }
        .divider{
            border-left: 1px solid var(--border-light);
            height: 40px;
            display: inline-block;
        }
        .flex{
            width: 100%;
        }
    }
    .details-head{
        .title{
            font-size: 20px;
        }
    }
    .details-body{
        display: flex;
        align-items: center;
        color: var(--secondary);
        font-size: 13px;
        .cell{
            margin-right: 10px;
            margin-left: 10px;
            &:first-child{
                margin-left: 0;
            }
        }
    }
    .admin-statistics-content {
        display: flex;
        background-color: #fff;
        padding: 15px;
        border: 1px solid var(--border-light);
        // border-radius: 4px;

        .item {
            &+.item {
                border-left: 1px solid var(--border-light);
                padding-left: 30px;
            }

            .icon {
                width: 44px;
                height: 44px;
                border-radius: 50%;
                border: 1px solid var(--light);
                background-color: #f2f3f5;
                padding: 5px;
                margin: 0 20px 0 0;
                box-shadow: 3px 2px 11px 0 rgb(70 70 70 / 22%);
            }

            label {
                color: var(--grey);
                font-size: 12px;
                margin-bottom: 5px;
                display: block;
            }

            .num {
                font-size: 30px;
            }
        }
    }
    .type-state{
        position: sticky;
        top: 0;
        background: #fff;
        z-index: 98;
    }
</style>